<template>
  <div class="search-container">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      background="#3296fa"
      placeholder="请输入搜索关键词"
      show-action
      @cancel="onCancel"
      @input="shuru"
      @search="search(value)"
    />

    <div class="search-box" v-if="value === '' && hisSearch.length !== 0">
      <!-- 历史记录标题 -->
      <div class="title">
        <van-cell title="历史记录">
          <template #right-icon>
            <van-icon name="delete-o" class="delete-icon" @click="delHis" />
          </template>
        </van-cell>
      </div>
      <!-- 历史记录列表 -->
      <ul class="items">
        <li
          class="item"
          v-for="(item, index) in hisSearch"
          :key="index"
          @click="search(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 联想关键词列表 -->
    <div class="lenovoList" v-else>
      <van-cell
        :title="item"
        icon="search"
        v-for="(item, index) in lenovoList"
        :key="index"
        @click="search(item)"
      />
    </div>
  </div>
</template>
<script>
// 导入search相关接口
import { getLenovo, getSearchRes, delHistory } from '../../../api/search.js'
// 导入vuex辅助函数
import { mapMutations } from 'vuex'
// 导入localstorage方法
import { setLocal, getLocal, removeLocal } from '../../../utils/token.js'
export default {
  data () {
    return {
      // 搜索词
      value: '',
      // 历史搜索数组
      hisSearch: [],
      // 联想关键词列表
      lenovoList: ''
    }
  },
  async created () {
    // 获取搜索历史接口
    // 给搜索历史数组赋值
    this.hisSearch = JSON.parse(getLocal('history')) || []
    // 判断历史数据数组长度是否为0,为0,说明local里面没有数据,需要将接口返回数据赋值给历史搜索数组
    console.log(this.hisSearch)
  },
  methods: {
    ...mapMutations(['setSearchList']),
    onCancel () {
      this.$router.push('/shouye')
    },
    // 搜索方法
    async search (item) {
      console.log('search')
      // 给value赋值
      this.value = item
      const res = await getSearchRes({ q: this.value })
      console.log(res)
      // 使用vuex辅助函数保存结果列表数据
      this.setSearchList(res.data.data.results)
      // 跳转到搜索结果页面
      this.$router.push(`/searchResult?ci=${item}`)
      // 将搜索词添加到hisSearch
      this.hisSearch.unshift(this.value)
      // 去重
      this.hisSearch = [...new Set(this.hisSearch)]
      // 数组长度限制
      this.hisSearch.splice(8)
      // 将数组保存到localstorage
      setLocal('history', JSON.stringify(this.hisSearch))
    },
    async delHis () {
      removeLocal('history')
      const res = await delHistory()
      console.log(res)
      this.hisSearch = JSON.parse(getLocal('history')) || []
    },
    async shuru () {
      if (this.value !== '') {
        const res = await getLenovo({ q: this.value })
        this.lenovoList = res.data.data.options
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search-container {
  background-color: #f5f7f9;
  height: 100vh;
  .van-search__action {
    color: #fff;
  }
  .search-box {
    margin-top: 10px;
    .title {
      /deep/ .van-cell {
        font-size: 12px;
      }
      .delete-icon {
        font-size: 20px;
      }
    }
    .items {
      margin-top: 1px;
      display: flex;
      flex-wrap: wrap;
      .item {
        background-color: #fff;
        width: 50%;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #f7f7f7;
      }
    }
  }
}
</style>
